
<template>
    <el-form label-position="left" size="mini" label-width="80px" class="base-attrbute">
      <el-form-item label="日期单位">
        <el-radio-group v-model="value.unit" >
            <el-radio label="date" border>日</el-radio>
            <el-radio label="week" border>周</el-radio>
            <el-radio label="month" border>月</el-radio>
            <el-radio label="year" border>年</el-radio>
            <el-radio label="daterange" border>范围日期</el-radio>
            <el-radio label="monthrange" border>范围月份</el-radio>
            <el-radio label="dates" border>多个日期</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="日期尺寸：">
        <el-select v-model="value.size" placeholder="请设置日期尺寸">
          <el-option label="大" value="medium"></el-option>
          <el-option label="中" value="small"></el-option>
          <el-option label="小" value="mini"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="格式：">
        <el-input v-model="value.format" placeholder="yyyy-MM-dd"></el-input>
      </el-form-item>
      <el-form-item label="禁用：">
          <el-radio-group v-model="value.disabled">
              <el-radio :label="true">禁用</el-radio>
              <el-radio :label="false">非禁用</el-radio>
          </el-radio-group>
      </el-form-item>
      <template v-if="value.unit == 'daterange' || value.unit == 'monthrange'">
          <el-form-item label="分隔符">
              <el-input v-model="value.separator" placeholder="请输入分隔符号"></el-input>
          </el-form-item>
          <el-form-item label="开始提示：">
            <el-input v-model="value.startPlaceholder" placeholder="请选择开始时间"></el-input>
          </el-form-item>
          <el-form-item label="结束提示：">
            <el-input v-model="value.endPlaceholder" placeholder="请选择结束时间"></el-input>
          </el-form-item>
      </template>
      <template v-if="value.unit != 'daterange' && value.unit != 'monthrange'">
          <el-form-item label="占位提示：">
            <el-input v-model="value.placeholder" placeholder="请选择时间"></el-input>
          </el-form-item>
      </template>
    </el-form>

</template>
<script type="text/javascript">
export default {
  created() {

  },
  props: {
    value: [Array, Object]
  },
  components: {
    //Logo
  },
  data() {
    return {
      data:{
        year:"yyyy",
      }
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {

  }
}

</script>
<style type="text/css" lang="scss">
.base-attrbute{
  padding: 10px;
  .el-radio{
    margin-right: 5px;
    margin-bottom: 5px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0px;
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }
  .el-form-item__label,.el-form-item__content{
    font-size: 12px !important;

  }

}
</style>

